<template>
  <el-container direction="vertical">
    <HeadNav ref="headnav" class="headnav" v-if="getuser"
      :icon="myteam.icon ? myteam.icon : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/logo_kexuezhongxin.svg'">
    </HeadNav>
    <router-view class="main" v-if="show" v-slot="{ Component, route }">
      <keep-alive :max="10" :include="['questionbankindex', 'questionindex', 'Home']">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </el-container>
</template>

<script setup lang='ts'>
import { computed, ref, provide, onMounted, watch } from "vue";
import { useStore } from "vuex";
import HeadNav from "../index/headNav.vue";
import Studycodemodel from "../mysql_interface/studycodemodel";
import { Storekey } from "../interface";
import { useRoute, useRouter } from "vue-router";
import { useStorage, useStyleTag } from '@vueuse/core'
import { ElNotification } from "element-plus";
import { asyncselectscienctuser } from "../api";
import { SET_TEAM } from "../index/store/mutation-types";
const show = ref(false)
const store = useStore(Storekey)
const code = ref<{
  error: number;
  msg?: string;
  data?: Studycodemodel.Iuserquestioninfo[];
  run?: true;
}>()
const socket = computed(() => {
  return store.state.socket
})

const headnav = ref()

provide('headnav', headnav)

provide('headnavdialogVisible', () => {
  headnav.value.shoudialogVisible("登录");
  return true;
})


provide('chat', 'hlg')

provide('runcode', () => {
  code.value = undefined
  return true;
})
provide('getcode', code)
const route = useRoute()
const getuser = computed(() => {
  return store.state.user
})

const scienceuser = ref<Studycodemodel.Iscienceuser[]>([])
provide('scienceuser', scienceuser)
const isphone = ref(false)
const title = ref('您还没有绑定手机号，无法收到通知信息，可点击绑定')
function clic() {
  console.log(headnav.value.shoudialogVisible('修改个人信息'))
}

const _myteam = localStorage.getItem('myTeam')

const myteam = useStorage<Studycodemodel.Iteam>('my-team', _myteam ? JSON.parse(_myteam) : { color: "-cheng" })

const mystyle = useStyleTag(`:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`)

watch(() => store.state.user, (v) => {
  if (v && !v.phonenum) {
    isphone.value = true
  }
})

onMounted(async () => {

  await store.dispatch('actiononline').then(async e => {
    if (!e) {
      await router.push('/Login')
    }
  })
  await store.dispatch('actionarticle')
  await store.dispatch('actionlabel')
  show.value = true;
  if (socket.value) {
    const v = socket.value
    v.on("runcode", (data) => {
      code.value = data;
    });
    v.on('notification', (data) => {
      const { title, context, type
      } = data
      ElNotification({
        title,
        message: context,
        type,
      })
    })
  }
  router.beforeResolve((to, from, next) => {
    const { name } = to;
    if (name == "题目") {
      if (!getuser.value) {
        headnav.value.shoudialogVisible();
        next(false);
        return;
      }
    } else if (name == "用户") {
      if (!getuser.value) {
        headnav.value.shoudialogVisible();
        next(false);
        return;
      }
    }
    next();
  });
})

watch(() => getuser.value, (v) => {
  if (v) {
    store.dispatch('actionteam', { userid: v.ID }).then(e => {
      const team = store.state.team?.rows.find(e => e.color)
      myteam.value = { ID: team?.ID, name: team?.name, color: team?.color, icon: team?.icon }
      mystyle.css.value = `:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`
    })
  } else {
    store.commit(SET_TEAM, null);
  }
})



const router = useRouter()

defineExpose({
  title,
  isphone
})



</script>

<style scoped>
.main {
  margin-bottom: 25px;
}
</style>

<style>
html,
body,
#app {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;

}

:root {
  --color--cheng2: #0B70C9;
  --color--cheng3: #5EB0F8;
  --color--cheng: #195A94;
}

#app {
  position: relative;
}

#app button:focus {
  outline: 0px !important;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre {
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  border: #ddd solid 1px;
  background: #f8f8f8;
  border-radius: 3px;
  overflow: auto;
  font-size: 0.875em;
  font-family: monospace;
  min-height: 30px;
}

a:hover {
  text-decoration: none;
}

.table tr td {
  font-size: 15px;
}

.text-00c8a5 {
  color: var(--color-cheng) !important;
}

.bg-00c8a5 {
  background-color: var(--color-cheng) !important;
  color: #fff;
}

/* .headnav {
  --color-43: #fff;
  --bs-white: #000;
} */
</style>
